<style lang="scss" scoped>
#cmain {
    .cmain-content {
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 10px;
        padding: 10px 30px 30px 30px;
        box-shadow: 0 0 10px 0 #cfcfcf;
        .content-title {
            line-height: 26px;
            color: rgba(102, 102, 102, 1);
            font-size: 18px;
            text-align: left;
            padding: 5px 0 10px;
            border-bottom: 1px solid #DCDFE6;
        }
        .inner {
            padding: 10px 40px;
            text-align: left;
            color: #101010;
            th{
                font-weight: bold;}
            h4 {
                padding: 15px 0;
                color: #337ab7;
                font-size: 16px;
            }
            p {
                line-height: 30px;
                color: rgba(16, 16, 16, 1);
                font-size: 14px;
                .level {
                    line-height: 30px;
                    color: rgba(16, 16, 16, 1);
                    font-size: 14px;
                    text-align: left;
                }
            }
            h5 {
                height: 23px;
                line-height: 20px;
                font-size: 14px;
                text-align: left;
                font-weight: normal;
                margin-left: 30px;
            }
        }
        .empty {
            height: 500px;
            text-align: center;
            margin: auto;
            line-height: 500px;
            font-size: 28px;
            .warnImg{
                padding:0 10px;
            }
        }
    }
}

table {
    width: 100%;
    border: 1px solid #cfcfcf;
    padding: 0;
    margin: 0 0 20px;
    border-collapse: collapse;
    th {
        height: 45px;
        line-height: 45px;
        text-align: center;
        border-bottom: 1px solid #cfcfcf;
        border-left: 1px solid #cfcfcf;
        font-weight: bold;
        font-weight: normal;
        padding: 0;
        margin: 0;
    }
    td {

        line-height: 45px;
        text-align: center;
        border-bottom: 1px solid #cfcfcf;
        border-left: 1px solid #cfcfcf;
        padding: 0;
        margin: 0; // word-break: break-all;
        span {
            display: block; // line-height: 45px;
            border-bottom: 1px solid #cfcfcf;
            word-break: break-all;
            &:last-of-type {
                border-bottom: none;
            }
        }
    }
}

.modaltable {
    width: 100%;
    p {
        text-align: left; // padding:0 20px;
        span {
            display: inline;
            line-height: 45px;
            border-bottom: none;
        }
    }
}

.treatmodal {
    padding: 10px 20px;
    h4 {
        margin: 10px 0;
        height: 23px;
        line-height: 23px;
        color: rgba(51, 122, 183, 1);
        font-size: 16px;
        text-align: left;
    }
    p {
        line-height: 28px;
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: left;
    }
}

.errorInner {
    min-height: 300px;
    position: relative;
}
</style>
<template>
    <div id="cmain">
        <div class="cmain-content" v-if='flag==true'>
            <div class="content-title">
                {{genename}}
            </div>
            <div v-if="isShowerror" class="inner errorInner">
                <error v-if="isShowerror" @errorCallback="getGeneDetail"></error>
            </div>
            <div v-if="!isShowerror" class="inner">
                <div v-if='this.productId==2'>
                    <div v-if='dataList.diseaseRisk!=null && dataList.diseaseRisk.relatedName!=null'>
                        <h4>相关综合征名称</h4>
                        <p>{{dataList.diseaseRisk.relatedName}}</p>
                    </div>
                    <div v-if='diseaseRiskTableList.length>0'>
                        <h4>{{dataList.geneName}}相关癌症风险表</h4>
                        <div style='width:500px;'>
                            <table border="1">
                                <thead>
                                    <tr>
                                        <th>癌症</th>
                                        <th>遗传癌症风险</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for='(item,index) in diseaseRiskTableList' :key="index">
                                        <td>{{item.cancerName}}</td>
                                        <td>{{item.cancerRisk}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div v-if='geneRiskInf.length>0'>
                        <h4>{{dataList.geneName}}基因概述</h4>
                        <p v-for='(item,index) in geneRiskInf' :key='index' v-if='geneRiskInf.length>0'>
                            <template>
                                {{item.information}}
                                <div class='level' v-for='(items,indexs) in item.childInf' :key='indexs' v-if='item.childInf.length>0'>
                                    <span style="padding-left:20px;"> {{items}}</span>
                                </div>
                            </template>
                        </p>
                    </div>
                    <div v-if='geneRiskInf.length>0'>
                        <h4>{{dataList.geneName}}基因相关癌症风险表</h4>
                        <div style='width:100%;'>
                            <table border="1">
                                <thead>
                                    <tr>
                                        <th>癌症类型</th>
                                        <th>年龄范围（岁）</th>
                                        <th>致癌风险</th>
                                        <th min-width='80'>一般人风险</th>
                                    </tr>
                                </thead>
                                <tbody v-for='(item,index) in geneRiskTableList' :key="index">
                                    <tr v-for='(items,indexs) in item.cancerRiskList' v-if='item.cancerRiskList.length>0'>
                                        <td :rowspan="item.cancerRiskList.length" v-if="indexs == 0">{{item.cancerType}}</td>
                                        <td>
                                            {{items.ageRange}}
                                        </td>
                                        <td>
                                            {{items.cancerRisk}}
                                        </td>
                                        <td>
                                            {{items.personRisk}}
                                        </td>
                                    </tr>
                                    <tr v-if='item.cancerRiskList.length==0'>
                                        <td>{{item.cancerType}}</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div v-if='riskManageInf.length>0'>
                        <p v-for='(item,index) in riskManageInf' :key='index' v-if='riskManageInf.length>0'>
                            <template>
                                {{item.information}}
                                <div class='level' v-for='(items,indexs) in item.childInf' :key='indexs' v-if='item.childInf.length>0'>
                                    <span style="padding-left:20px;"> {{items}}</span>
                                </div>
                            </template>
                        </p>
                    </div>
                    <div v-if='riskManageInf.length>0'>
                        <h4>{{dataList.geneName}}癌症风险管理表</h4>
                        <div style='width:100%;'>
                            <table border="1">
                                <thead>
                                    <tr>
                                        <th width='100'>癌症类型</th>
                                        <th>检查项目</th>
                                        <th width='200'>开始年龄</th>
                                        <th width='200'>频率</th>
                                    </tr>
                                </thead>
                                <tbody v-for='(item,index) in riskManageTableList' :key="index">
                                    <tr v-for='(items,indexs) in item.riskManage' :key='indexs' v-if='item.riskManage.length>0'>
                                        <td :rowspan="item.riskManage.length" v-if="indexs == 0">{{item.cancerType}}</td>
                                        <td>
                                            {{items.checkItem}}
                                        </td>
                                        <td>
                                            {{items.startAge}}
                                        </td>
                                        <td>
                                            {{items.frequency}}
                                        </td>
                                    </tr>
                                    <tr v-if='item.riskManage.length==0'>
                                        <td>{{item.cancerType}}</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div v-if='dataList.drugList && dataList.drugList.length>0'>
                    <h4>{{dataList.geneName}}推荐药物列表</h4>
                    <h5 v-for='(item,index) in dataList.drugList' :key='index' :style="{'color':item.chemblList.length==0?'#999':'#337ab7','cursor':item.chemblList.length==0?'auto':'pointer'}" @click='listmodal(item)'>{{item.disease}}</h5>
                </div>
                <div v-if='dataList.treatList && dataList.treatList.length>0'>
                    <h4>{{dataList.geneName}}推荐治疗方案</h4>
                    <h5 v-for='(item,index) in dataList.treatList' :key='index' :style="{'color':item.gard==null?'#999':'#337ab7','cursor':item.gard==null?'auto':'pointer'}" @click='treatmodal(item)'>{{item.disease}}</h5>
                </div>
                <div v-if='dataList.familyInf!=null && this.productId==2'>
                    <h4>家庭成员信息</h4>
                    <p v-for='(item,index) in dataList.familyInf' :key='index' v-if='dataList.familyInf.length>0'>{{item}}</p>
                </div>
                <div v-if='dataList.references!=null && this.productId==2'>
                    <h4>参考文献</h4>
                    <p v-for='(item,index) in dataList.references' :key='index' v-if='dataList.references.length>0'>{{item}}</p>
                </div>
            </div>
        </div>
        <div class="cmain-content" v-else>
            <div class="empty">
                <img class="warnImg" src="/static/icon/warn.png" />
                <span>暂无数据</span>
            </div>
        </div>
        <!-- 推荐药物列表 -->
        <Modal width="1085px" v-model="listmodalShow" :mask-closable="false" :title="listName">
            <div class="modaltable">
                <el-table :data="chemblList" height="500" border style="width: 100%">
                    <el-table-column prop="efoId" label="Orpha ID" width="90">
                    </el-table-column>
                    <el-table-column prop="efoName" label="适应症" width="150">
                    </el-table-column>
                    <el-table-column prop="moleculeName" label="药物名称">
                    </el-table-column>
                    <el-table-column prop="moleculeType" label="药物类型">
                    </el-table-column>
                    <el-table-column prop="firstApproval" label="批准上市" width="80">
                    </el-table-column>
                    <el-table-column prop="maxPhase" label="临床时期" width="80">
                    </el-table-column>
                    <el-table-column prop="mechanismAction" label="作用机理">
                    </el-table-column>
                    <el-table-column label="临床试验" width="220">
                        <template slot-scope='scope'>
                            <p v-if='new RegExp("^NCT.*$").test(scope.row.clinicalTrails)' v-for='(item,index) in scope.row.clinicalTrailList'>
                                <span v-if='scope.row.clinicalTrailList[2*index]!=null'>{{scope.row.clinicalTrailList[2*index]}}</span>
                                <span v-if='scope.row.clinicalTrailList[2*index]!=null'>{{scope.row.clinicalTrailList[2*index+1]}}</span>
                            </p>
                            <p v-if='new RegExp("^setid.*$").test(scope.row.clinicalTrails)' v-for='(item,index) in scope.row.clinicalTrailList'>
                                <span>{{item}}</span>
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div slot='footer'></div>
        </Modal>
        <!-- 推荐治疗方案 -->
        <Modal width="1085px" v-model="treatmodalShow" :mask-closable="false" :title="treatName">
            <div class='treatmodal'>
                <div>
                    <h4>标准治疗方案</h4>
                    <p v-for='(items,indexs) in gardList.treatments'>
                        <Icon type="ios-star-outline"></Icon>
                        <span style="padding-left:20px;"> {{items}}</span>
                    </p>
                </div>
                <div>
                    <h4>最后更新时间：{{gardList.lastUpdate}}</h4>
                </div>
                <div>
                    <h4>参考文献</h4>
                    <p v-for='(items,indexs) in gardList.references'>{{items}}</p>
                </div>
            </div>
            <div slot='footer'></div>
        </Modal>
    </div>
</template>
<script>
import { data } from 'api/index.js';
import error from '@/components/404.vue';
export default {
    name: 'genecheck',
    data() {
        return {
            isShowerror: false,
            diseaseRiskTableList: [],
            geneRiskTableList: [],
            riskManageTableList: [],
            riskManageInf: [],
            geneRiskInf: [],
            chemblList: [],
            treatmodalShow: false,
            listmodalShow: false,
            listName: '',
            treatName: '',
            treatment: '',
            gardList: [],
            dataList: {},
            genename: '',
            productId:"",
            flag: true
        }
    },
    methods: {
        treatmodal(data) {
            if (data.gard != null) {
                this.treatName = data.disease;
                this.gardList = data.gard;
                this.treatmodalShow = true;
            }
        },
        listmodal(data) {
            if (data.chemblList.length > 0) {
                this.listmodalShow = true;
                data.chemblList.forEach(function(element) {
                    element['clinicalTrailList'] = element.clinicalTrails.split(',')
                }, this);
                console.log(data.chemblList)
                this.chemblList = data.chemblList;
                this.listName = data.disease;
            }
        },
        getGeneDetail() {
            // console.log(this.$store.state.geneName)
            let obj = {
                genename: this.genename,   //this.genename
                productId: this.productId
            }
            data.getGeneDetail(obj).then((res) => {
                if (res.returnCode == 0 || res.returnCode == 200) {
                    if (res.data != null) {
                        if (res.data._id || res.data.drugList.length > 0 || res.data.treatList.length > 0) {
                            this.dataList = M.clone(res.data);
                            if (this.productId == 2) {
                                if (this.dataList.diseaseRisk != null && this.dataList.diseaseRisk.diseaseRiskTableList.length > 0) {
                                    this.diseaseRiskTableList = this.dataList.diseaseRisk.diseaseRiskTableList;
                                }
                                if (this.dataList.geneOverview != null && this.dataList.geneOverview.geneRiskTableList.length > 0) {
                                    this.geneRiskTableList = this.dataList.geneOverview.geneRiskTableList;
                                    if (this.dataList.geneOverview.geneRiskInf.length > 0) {
                                        this.geneRiskInf = this.dataList.geneOverview.geneRiskInf
                                    }
                                    if (this.dataList.geneOverview.riskManageInf.length > 0) {
                                        this.riskManageInf = this.dataList.geneOverview.riskManageInf
                                    }
                                }
                                if (this.dataList.geneOverview != null && this.dataList.geneOverview.riskManageTableList.length > 0) {
                                    this.riskManageTableList = this.dataList.geneOverview.riskManageTableList;
                                }
                            }
                            if (this.dataList.treatList.length > 0) {
                                this.dataList.treatList.forEach(function(ele) {
                                    if (ele.gard != null) {
                                        ele.gard['treatments'] = ele.gard.treatment.split('\n')
                                        ele.gard['references'] = ele.gard.reference.split('\n')
                                    }
                                })
                            }
                        } else {
                            this.flag = false;
                        }



                    }
                }
                this.isShowerror = false;
            }).catch(error => {
                console.log(error);
                this.isShowerror = true;
            });
        }
    },
    created() {
        // this.genename = this.$store.state.geneName;
        this.genename = M.url().geneName;
        this.productId = M.url().productId;
        this.getGeneDetail()
        // this.$store.state.geneName=this.$store.state.geneName;


    },
    components: {
        error
    }
}
</script>

